<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            display: flex;
        }

        div{
            width: 20%;
            height: 100%;
            background-color: olive;
            display: flex;
            flex-direction: column;
        }
        iframe{
            width: 80%;
            height: 100%;
        }
        div>a{
            line-height: 50px;

        }
    </style>
</head>
<body>
    <div>
        <a href="http://image.baidu.com/" target="iframe">百度图片</a>
        <a href="http://music.baidu.com/" target="iframe">百度音乐</a>
        <a href="http://waimai.baidu.com/" target="iframe">百度外卖</a>
        <a href="http://map.baidu.com/" target="iframe">百度地图</a>
        <a href="补充.html" target="iframe">本地页面</a>
    </div>
    <!--iframe: 标签用来在当前页面内定义一个独立的窗口显示其他页面内容.
    src:加载的其他页面的地址
    frameborder: 是否显示边框.0和1分别代表否和是.
    设置超链接a标签的target属性值和iframe标签的name属性值一致,可以实现在iframe内打开超链接界面.
    -->
    <iframe src="http://image.baidu.com/" frameborder="1" name="iframe"></iframe>
</body>
</html>